<template>
  <div>
    <!-- 4-2-3 绑定邮箱-->
    <van-nav-bar title="绑定邮箱" left-arrow @click-left="$router.go(-1)" />
    <div class="lightblue"></div>
    <div class="content">
      <van-field
        placeholder="请输入邮箱"
        v-model="phoneNumber"
        :type="passwordType"
        :error-message="phoneNumberError"
      />
      <van-field placeholder="输入验证码" v-model="password" type="text">
        <VerifyCodeBtn slot="button" @sendVerifyCode="sendVerifyCode" />
      </van-field>
      <div class="button-wrap">
        <br />
        <van-button size="large" @click="handleLogin" class="h40 br-10" type="info">确定</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import VerifyCodeBtn from "@/components/VerifyCodeBtn";
export default {
  name: "Login",
  data() {
    return {
      phoneNumber: "",
      password: "",
      code: "",
      loginWay: "password",
      passwordType: "password",
      phoneNumberError: ""
    };
  },
  methods: {
    sendVerifyCode() {
      this.phoneNumberError = "";
      if (!this.phoneNumber) {
        // 根据需求做判断
        this.phoneNumberError = "手机号码必填";
      }
    },
    switchPasswordType() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    },
    switchLoginWay() {
      this.password = this.code = "";
      this.loginWay = this.loginWay === "password" ? "verifyCode" : "password";
    },
    handleLogin() {
      const data = {
        phoneNumber: this.phoneNumber,
        password: this.password,
        $router: this.$router,
        $route: this.$route
      };
      this.login(data);
    },
    help() {
      // 帮助
      console.log("帮助.");
    },
    ...mapActions({
      login: "user/login"
    })
  },
  computed: {
    loginWayObj: function() {
      if (this.loginWay === "password") {
        return {
          icon: "closed-eye",
          toggleMsg: "验证码登录"
        };
      }
      return {
        icon: "eye",
        toggleMsg: "密码登录"
      };
    },
    passwordIcon: function() {
      return this.passwordType === "password" ? "closed-eye" : "eye";
    }
  },
  components: {
    VerifyCodeBtn
  }
};
</script>
<style lang="scss" scoped>
.lightblue {
  height: 10px;
  background: rgba(240, 247, 253, 1);
}
.content {
  width: 100%;
  height: auto;
  padding: 0 15px;
  box-sizing: border-box;
  .button-wrap {
    width: 100%;
    height: auto;
    margin-top: 15px;
  }
}
</style>
